<template>
  <view
    :class="[device.lang]"
    :style="showIndex == 0 ? 'padding-bottom: 70rpx;' : ''"
  >
    <view class="rtl">
      <NavBar
        bgColor="#fff"
        :title="pageTitle"
        titleStyle="paddingBottom:20rpx; color:#000;"
      />
      <view class="" style="margin-top: 60rpx" v-show="showIndex == 0">
        <serviceVue @postMessageBoards="postMessageBoards" />
        <answersView :dataList="list" @prentCheck="prentCheck" />
      </view>
      <view class="" v-show="showIndex == 1">
        <answersDetil :dataDetail="params" />
        <view class="back" @click="showTab">
          {{ t("Back") }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ServiceAPI } from "@/api";
import NavBar from "@/components/NavBar/index.vue";
import serviceVue from "@/components/serviceVue/serviceFrom.vue";
import answersView from "@/components/serviceVue/answersView.vue";
import answersDetil from "@/components/serviceVue/answersDetil.vue";
import { useDeviceStore } from "@/store/modules/device";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const device = useDeviceStore();
const pageTitle = ref("Boss Online");
const list = ref([]);
const showIndex = ref(0);
const params = ref(null);
onMounted(async () => {
  getMessageBoardsList();
  uni.hideTabBarRedDot({
    index: 2,
  });
});
const getMessageBoardsList = async () => {
  let res = await ServiceAPI.getMessageBoardsList();
  list.value = res.data;
  let index = 0;
  for (let i of list.value) {
    if (i.status != "3") {
      index++;
    }
  }
  if (index !== 0) {
    uni.setTabBarBadge({
      index: 2,
      text: index + "",
    });
  } else {
    uni.hideTabBarRedDot({
      index: 2,
    });
  }
};
const prentCheck = (data) => {
  uni.showLoading({
    title: "加载中",
  });
  ServiceAPI.getMessageBoardsDetail(data.id)
    .then((res) => {
      pageTitle.value = t("Detail");
      params.value = res.data;
      showIndex.value = 1;
    })
    .finally(() => {
      uni.hideLoading();
      uni.hideTabBar();
    });
};
const postMessageBoards = (data) => {
  console.log(data);
  getMessageBoardsList();
};
const showTab = () => {
  showIndex.value = 0;
  pageTitle.value = "Online Service";
  getMessageBoardsList();
  uni.showTabBar();
};
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

page {
  background: $primary-bg;
}

.back {
  background: #267a58;
  border-radius: 10rpx 10rpx 0 0;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110rpx;
  color: #fff;
  text-align: center;
  line-height: 110rpx;
}
</style>
